<template>
    <div class="data-list">
      <div class="cards-container">
        <div v-for="(item, index) in dataCards" :key="index" class="card-wrapper">
          <el-card :body-style="{ padding: '20px' }" class="data-card glass-card" :class="item.class">
            <div class="card-content">
              <div class="icon-wrapper">
                <i :class="item.icon"></i>
              </div>
              <div class="info-wrapper">
                <div class="card-value">{{ item.value }}</div>
                <div class="card-title">{{ item.title }}</div>
              </div>
            </div>
            <div class="glass-effect"></div>
          </el-card>
        </div>
        
        <!-- 输赢统计框 -->
        <div class="card-wrapper win-lose-wrapper">
          <el-card :body-style="{ padding: '16px 20px' }" class="data-card glass-card yellow-card">
            <div class="card-content win-lose-content">
              <div class="icon-wrapper">
                <i class="el-icon-trophy"></i>
              </div>
              <div class="info-wrapper win-lose-info">
                <div class="win-lose-row">
                  <div class="win-lose-label">绝对值去化输赢</div>
                  <div class="win-lose-value" :class="absoluteWinLose">
                    {{ absoluteWinLose === 'win' ? '赢' : '输' }}
                  </div>
                </div>
                <div class="win-lose-divider"></div>
                <div class="win-lose-row">
                  <div class="win-lose-label">平均值去化输赢</div>
                  <div class="win-lose-value" :class="averageWinLose">
                    {{ averageWinLose === 'win' ? '赢' : '输' }}
                  </div>
                </div>
              </div>
            </div>
            <div class="glass-effect"></div>
          </el-card>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'Taber',
    props: {
      province: {
        type: String,
        default: ''
      },
      city: {
        type: String,
        default: ''
      },
      competitorCount: {
        type: Number,
        default: 0
      },
      competitorArea: {
        type: Number,
        default: 0
      },
      competitorSoldArea: {
        type: Number,
        default: 0
      },
      competitorStockArea: {
        type: Number,
        default: 0
      },
      competitorMonthlyAverage: {
        type: Number,
        default: 0
      },
      absoluteWinLose: {
        type: String,
        default: 'win',
        validator: (value) => ['win', 'lose'].includes(value)
      },
      averageWinLose: {
        type: String,
        default: 'win',
        validator: (value) => ['win', 'lose'].includes(value)
      }
    },
    computed: {
      dataCards() {
        return [
          {
            title: '竞品数量',
            value: this.formatNumber(this.competitorCount),
            class: 'blue-card',
            icon: 'el-icon-office-building'
          },
          {
            title: '竞品开盘面积',
            value: this.formatArea(this.competitorArea),
            class: 'red-card',
            icon: 'el-icon-house'
          },
          {
            title: '竞品去化面积',
            value: this.formatArea(this.competitorSoldArea),
            class: 'orange-card',
            icon: 'el-icon-sell'
          },
          {
            title: '竞品库存面积',
            value: this.formatArea(this.competitorStockArea),
            class: 'green-card',
            icon: 'el-icon-box'
          },
          {
            title: '竞品月均去化',
            value: this.formatArea(this.competitorMonthlyAverage),
            class: 'purple-card',
            icon: 'el-icon-data-line'
          }
        ]
      }
    },
    methods: {
      // 格式化数字显示
      formatNumber(num) {
        if (!num || num === 0) return '0'
        if (num >= 10000) {
          return (num / 10000).toFixed(1) + '万'
        }
        return Math.round(num).toLocaleString()
      },
      
      // 格式化面积显示
      formatArea(area) {
        if (!area || area === 0) return '0㎡'
        if (area >= 10000) {
          return (area / 10000).toFixed(1) + '万㎡'
        }
        return Math.round(area).toLocaleString() + '㎡'
      }
    }
  }
  </script>
  
  <style lang="less" scoped>
  .data-list {
    padding: 20px;
    background: linear-gradient(135deg, #f0f2f5, #ffffff);
    border-radius: 12px;
    min-height: 120px;

    .cards-container {
      display: flex;
      justify-content: space-between;
      gap: 15px;
      flex-wrap: wrap;
    }

    .card-wrapper {
      flex: 1;
      min-width: 180px;
      max-width: calc(16.666% - 12px);
    }
  
    .data-card {
      border-radius: 16px;
      display: flex;
      width: 100%;
      height: 100%;
      
      transition: all 0.3s ease;
      border: none;
      position: relative;
      overflow: hidden;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
  
      &:hover {
        transform: translateY(-5px);
        .glass-effect {
          opacity: 0.9;
        }
      }

      .glass-effect {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(
          135deg,
          rgba(255, 255, 255, 0.9),
          rgba(255, 255, 255, 0.8)
        );
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 16px;
        opacity: 0.85;
        transition: opacity 0.3s ease;
        z-index: 0;
      }
  
      .card-content {
        display: flex;
        align-items: center;
        position: relative;
        z-index: 1;
        width: 100%;
      }
  
      .icon-wrapper {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 15px;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        border: 1px solid rgba(255, 255, 255, 0.5);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        flex-shrink: 0;
  
        i {
          font-size: 24px;
          text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
      }
  
      .info-wrapper {
        flex: 1;
      }
  
      .card-value {
        font-size: 24px;
        font-weight: 600;
        margin-bottom: 4px;
        line-height: 1;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
      }
  
      .card-title {
        font-size: 14px;
        line-height: 1;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
      }

      &.el-card {
        background-color: transparent;
        box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
      }
    }

    // 响应式布局
    @media (max-width: 1200px) {
      .card-wrapper {
        max-width: calc(33.333% - 10px);
      }
    }

    @media (max-width: 768px) {
      .cards-container {
        flex-direction: column;
      }
      
      .card-wrapper {
        max-width: 100%;
        margin-bottom: 15px;
      }
    }
  
    .blue-card {
      background: linear-gradient(135deg, #e6f7ff, #bae7ff);
      .icon-wrapper {
        background: #1890ff;
        i { color: #ffffff; }
      }
      .card-value { color: #1890ff; }
      .card-title { color: #4096ff; }
    }
  
    .red-card {
      background: linear-gradient(135deg, #fff1f0, #ffccc7);
      .icon-wrapper {
        background: #f5222d;
        i { color: #ffffff; }
      }
      .card-value { color: #f5222d; }
      .card-title { color: #ff4d4f; }
    }
  
    .orange-card {
      background: linear-gradient(135deg, #fff7e6, #ffd591);
      .icon-wrapper {
        background: #fa8c16;
        i { color: #ffffff; }
      }
      .card-value { color: #fa8c16; }
      .card-title { color: #ffa940; }
    }
  
    .green-card {
      background: linear-gradient(135deg, #f6ffed, #b7eb8f);
      .icon-wrapper {
        background: #52c41a;
        i { color: #ffffff; }
      }
      .card-value { color: #52c41a; }
      .card-title { color: #73d13d; }
    }
  
    .purple-card {
      background: linear-gradient(135deg, #f9f0ff, #efdbff);
      .icon-wrapper {
        background: #722ed1;
        i { color: #ffffff; }
      }
      .card-value { color: #722ed1; }
      .card-title { color: #9254de; }
    }

    .yellow-card {
      background: linear-gradient(135deg, #fffbe6, #fff1b8);
      .icon-wrapper {
        background: #faad14;
        i { color: #ffffff; }
      }
      .card-value { color: #faad14; }
      .card-title { color: #ffc53d; }
    }

    .win-lose-wrapper {
      flex: 1;
      min-width: 180px;
      max-width: calc(16.666% - 12px);
    }

    .win-lose-content {
      align-items: center !important;
    }

    .win-lose-wrapper .icon-wrapper {
      width: 40px;
      height: 40px;
      margin-right: 10px;
      flex-shrink: 0;

      i {
        font-size: 20px;
      }
    }

    .win-lose-info {
      display: flex;
      flex-direction: column;
      gap: 0;
      width: 100%;
      justify-content: center;
      flex: 1;
    }

    .win-lose-row {
      display: flex;
      flex-direction: column;
      gap: 2px;
      padding: 4px 0;
    }

    .win-lose-divider {
      width: 100%;
      height: 1px;
      background: rgba(255, 197, 61, 0.3);
      margin: 4px 0;
    }

    .win-lose-label {
      font-size: 10px;
      color: #ffc53d;
      line-height: 1.2;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .win-lose-value {
      font-size: 18px;
      font-weight: 600;
      line-height: 1.2;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
      white-space: nowrap;

      &.win {
        color: #52c41a;
      }

      &.lose {
        color: #f5222d;
      }
    }
  }
  </style>